<template>
  <div>
    {{ msg }}
    <br>
    传递的消息：{{passmsg}}
    <br>
    传递的数字：{{numberToDo}}
    <br>
    动态传递的消息：{{toVal}}
    <button @click="emitMyEvent">emit</button>
        <slot name="header">no header</slot> 
        <p>balabalabalabala</p>
        <slot name="footer">no footer</slot>  
  </div>
</template>
<script>
export default {
  // props:['passmsg'],  //接收数组或者对象
  props:{
    'passmsg':String,
    'number-to-do':[Number,String],  //[Number,String,...] 无法传递数字，因为属性传递都是字符串
    'to-val':[Number,String]
  },
  data () {
    return {
      msg: 'i am a component'
    }
  },
  methods:{
    emitMyEvent(){
      this.$emit("my-event",this.msg)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  
</style>
